import { useEffect, useState, useContext } from "react"
import { useOutletContext } from "react-router-dom"

import Banneritem from "../../../components/banneritem/index.jsx"
import Smalltitleitem from "../../../components/smalltitleitem/index.jsx"
import Baseshare from "./baseshare/index.jsx"
import Newshare from "./newshare/index.jsx"
import Columnsitem from "../../../components/columnsitem/index.jsx"
import { Coxt } from "../../home/index.jsx"

import './index.css'

export default function () {

    // 接收全局数据

    const { iffullwidths } = useOutletContext()//Outlet组件传进来的方式获取iffullwidth
    const { iffullwidth } = useContext(Coxt)//档案馆的方式获取iffullwidth

    // data

    // methods

    let setitemfixwrap = function () {
        document.querySelectorAll('.fixitemwrap').forEach((item) => {
            item.style.width = document.querySelector('.centerwrap').offsetWidth - 20 + 'px'
            item.style.marginLeft = '-10px'
        })
        setTimeout(() => {
            setitemfixwrap()
        }, 100)
    }

    // mounted / update

    useEffect(() => {
        setitemfixwrap()
    }, [])

    useEffect(() => {
        console.log(iffullwidth)
    }, [iffullwidth])

    return (
        <>
            <div className="centerwrap">
                <Banneritem />
                <div className="fixitemwrap">
                    <Baseshare />
                </div>
                <Smalltitleitem title='今日上新' />
                <Newshare />
                <Smalltitleitem title='猜您喜欢' />
                <div className="fixitemwrap">
                    {
                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => {
                            return <Columnsitem key={item} />
                        })
                    }
                    <div style={{ clear: 'both' }}></div>
                </div>
            </div>
        </>
    )
}